<template>
	<view class="">
		<Swipper :Height="750" :swipers="goods_info.slider_images"></Swipper>
		<view class="shop-info">
			<view class="name">
				{{goods_info.title}}
			</view>
			<view class="introduce">
				{{goods_info.description}}
			</view>
			<view class="shop-info-bottom">
				<view class="price-box">
					<view class="present-price">
						￥{{goods_info.price}}
					</view>
					<view class="origin-price" v-if="goods_info.price!==goods_info.origin_price">
						￥{{goods_info.origin_price}}
					</view>
				</view>
				<view class="sales">
					销量: {{goods_info.sales}}
				</view>
			</view>
		</view>
		<SplitLine :height="14"></SplitLine>
		<view class="Det-introduction">
			<view class="title">
				商品详情
			</view>
			<view class="conent">
				<Parse :html="goods_info.content"></Parse>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-left">
				<view class="shopcar" @click="alterCollection">
					<image :src="goods_info.is_collect==true?'../../static/Shop/sc.png':'../../static/Shop/sc2.png'" mode=""></image>
					<view class="">
						收藏
					</view>
				</view>
				<view class="shopcar" @click="goShop">
					<image src="../../static/Shop/gwc.png" mode=""></image>
					<view class="">
						购物车
					</view>
				</view>
			</view>
			
			<view class="total-box">
				<Btn marked="加入购物车" backgroundColor="#8F9DB0" :width="240" :borderRadius="0" :height="100" @click.native="Visible"></Btn>
				<Btn marked="立即结算" backgroundColor="#5C6B7E" :width="240" :borderRadius="0" :height="100"></Btn>
			</view>
		</view>
		<Drawer mode="bottom" :visible="visible" @close="visible = false">
			<view class="drawer" >
				<view class="shop-top-box">
					<text class="iconfont icon-close-circle" style="font-size: 50rpx; margin-right: 60rpx; color: #808080;" @click="visible = false"></text>
					<view class="shop-name">
						{{goods_info.title}}
					</view>
				</view>
				<view class="" v-if="goods_info.spec!==0">
					<SplitLine :height="14"></SplitLine>
					<view class="Specifications">
						<view class="" v-for="(item,index) in 2" :key="index">
							<view class="Specifications-title">
								码数
							</view>
							<view class="Specifications-list">
								<view class="list-item" v-for="(item,index) in codelist" :key="index" :class="codeindex==item.id?'active-list-item':''" @click="getCode(item)">
									{{item}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<SplitLine :height="14"></SplitLine>
				<view class="count-box">
					<view class="count-title">
						数量
					</view>
					<view class="operation">
						<view class="add" @click="reduce">
							-
						</view>
						<view class="num">
							{{num}}
						</view>
						<view class="reduce" @click="add">
							+
						</view>
					</view>
				</view>
				<SplitLine :height="14"></SplitLine>
				<view class="btn">
					<Btn marked="确定" backgroundColor="#5C6B7E" :width="240" :borderRadius="0" :height="100" @click.native="addCart"></Btn>
				</view>
				
			</view>
			
		</Drawer>
	</view>
</template>

<script>
	import Swipper from "../../components/bw-swipers/bw-swipers.vue";
	import SplitLine from "../../components/bw-Split-line/bw-Split-line.vue";
	import Btn from "../../components/bw-Btn/bw-btn.vue";
	import Drawer from "./components/bw-drawer.vue";
	import Parse from "../../components/bw-parse/bw-parse.vue";
	import BwIcon from "../../components/bw-icon/bw-icon.vue"
	import {goodsDetail,cartAdd,goodscollectSwitch} from "../../api/shop.js"
	export default{
		components:{
			Swipper,
			SplitLine,
			Btn,
			Drawer,
			Parse,
			BwIcon
		},
		data(){
			return {
				visible:false,
				num:1,
				goods_info:{},
				codelist:["S","M","L","XL","XXL","XXXL","XXXXL"],
				colorlist:["白色","黄色","灰色","黑色","蓝色","绿色"],
				codeindex:0,
				colorindex:0,
			}
		},
		onLoad(point) {
			if(!point.id){
				goodsDetail({
					id:22,
				}).then(res=>{
					this.goods_info=res.data
				})
			}
			else{
				goodsDetail({
					id:point.id,
				}).then(res=>{
					this.goods_info=res.data
				})
			}
			
		},
		methods:{
			Visible(){
				this.visible=true
			},
			addCart(){
				cartAdd({
					goods_id:this.goods_info.id,
					cart_num:this.num
				}).then(res=>{
					this.visible=false
					console.log(res)
					if(res.status==411){
						uni.showModal({
							title:"提示",
							content:"您还没有登录",
							showCancel:false,
							confirmText:"去登录",
							success(res) {
								uni.navigateTo({
									url:'/pages/Mine/Login/Loginfour'
									})
								}
							})
					}
					else{
						uni.showToast({
							title:"添加成功",
						})
					}
				})
				
			},
			//加
			add(){
				this.num++
			},
			//减
			reduce(){
				if(this.num>1){
					this.num--
				}else{
					return
				}
			},
			//收藏
			async alterCollection(){
				await goodscollectSwitch({
					goods_id:this.goods_info.id
				}).then(res=>{
					goodsDetail({
						id:this.goods_info.id,
					}).then(res=>{
						this.goods_info=res.data
					})
				})
			},
			//跳转购物车
			goShop(){
				uni.switchTab({
					url:"/pages/TabBar/Shop/shop"
				})
			},
			getCode(item){
				this.codeindex=item.id
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../iconfont.scss";
	.shop-info{
		padding: 40rpx;
		.name{
			font-size: 40rpx;
			font-weight: bolder;
		}
		.introduce{
			font-size: 30rpx;
			font-weight: 400;
			margin: 20rpx 0; 
			color: #A5A5A5;
		}
		.shop-info-bottom{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.price-box{
				display: flex;
				align-items: center;
				.present-price{
					font-size: 40rpx;
					font-weight: bolder;
					color: #BF0000;
				}
				.origin-price{
					color: #979797;
					text-decoration: line-through;
					font-weight: 400;
					margin-left: 20rpx;
				}
			}
			.sales{
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	}
	.Det-introduction{
		width: 100%;
		padding-bottom: 140rpx;
		.title{
			width: 100%;
			margin: 40rpx 0;
			font-size: 40rpx;
			font-weight: bolder;
			display: flex;
			justify-content: center;
		}
		.conent{
			padding: 0 40rpx;
		}
	}
	.bottom{
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		border-top: 1px solid #D1D1D3;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0px;
		left: 0px;
		.total-box{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: red;
			font-weight: bolder;
		}
		.bottom-left{
			width: 35%;
			display: flex;
			.shopcar{
				width: 50%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		
	}
	.btn{
		width: 88%;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		padding: 40rpx;
	}
	.shop-top-box{
		padding: 40rpx;
		display: flex;
		align-items: center;
		.shop-name{
			font-size: 32rpx;
			font-weight: bolder;
		}
	}
	.Specifications{
		.Specifications-title{
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			margin-left: 40rpx;
			font-size: 32rpx;
			font-weight: bolder;
			color: #888888;
		}
		.Specifications-list{
			padding: 20rpx 40rpx;
			display: flex;
			flex-wrap: wrap;
			.list-item{
				padding: 30rpx 46rpx;
				
			}
			.active-list-item{
				background-color: #CCCCCC;
				border: 1px solid #EEEEEE;
			}
		}
	}
	.count-box{
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.count-title{
			margin-left: 40rpx;
			font-size: 32rpx;
			font-weight: bolder;
			color: #888888;
		}
		.operation{
		width: 40%;
		height: 44rpx;
		display: flex;
		justify-content: space-around;
		margin-right: 30rpx;
		.add{
			width: 44rpx;
			height: 44rpx;
			text-align: center;
			line-height: 36rpx;
			font-size: 60rpx;
			border: 1px solid #5C6B7E;
			border-radius: 6rpx;
		}
		.num{
			width: 44rpx;
			height: 44rpx;
			font-size: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.reduce{
			width: 44rpx;
			height: 44rpx;
			text-align: center;
			line-height: 44rpx;
			font-size: 44rpx;
			border: 1px solid #5C6B7E;
			border-radius: 6rpx;
		}
	}
}
	
</style>
